<template>
	<div class="p-2">
		<div class="py-2">
			<button @click="save" class="btn btn-primary">保存</button>
		</div>
		<div class="shadow radius">
			<div class="p-2 bg-shuilan text-white">
				<span>推荐类型</span>
			</div>
			<div class="">
				<div class="p-2" v-for="(lx, index) in lxs" :key="index">
					<div class="p-2 shadow radius d-flex justify-content-between align-items-center">
						<span>{{lx.lxname}}</span>
						<button @click="qxtj(lx)" v-if="lx.checked" class="btn btn-danger small">取消</button>
						<button @click="tj(lx)" v-else class="btn btn-success small">推荐</button>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>

	export default {
		data: function() {
			return {
				setting: {
					setid: "1",
					tjlx: [],
				},
				lxs: [],
				tjlxidObj: {},
			};
		},
		methods: {
			qxtj: function(lx) {
				lx.checked = false;
				this.setting.tjlx = this.setting.tjlx.filter(item => item != lx.akclxid);
				console.log(this.setting.tjlx);
				this.$forceUpdate();
			},
			tj: function(lx) {
				lx.checked = true;
				this.setting.tjlx.push(lx.akclxid);
				console.log(this.setting.tjlx);
				this.$forceUpdate();
			},
			save: function() {
				this.http.post({
					url: "/settings/xtsz/info",
					data: this.setting,
				}).then(response => {
					if (response.saveMsg) {
						this.message.info("保存成功");
					}
				});
			},
			loadAllLx: function() {
				return this.http.get({
					url: "/kc/kclx/list"
				}).then(data => {
					this.lxs = data.lxs;
					for (let index in this.lxs) {
						let lx = this.lxs[index];
						if (this.tjlxidObj[lx.akclxid]) {
							lx.checked = true;
						}
					}
				});
			}
		},
		created: function() {

			this.http.get({
				url: "/settings/tjlx",
			}).then(data => {
				this.setting = data.xtsz;
				console.log(data);
				for (let index in this.setting.tjlx) {
					let tjlxid = this.setting.tjlx[index];
					this.tjlxidObj[tjlxid] = true;
				}
			}).then(this.loadAllLx);
		},

	};
</script>

<style></style>